<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="wrap">
    <button class="btn">新增</button>
    <div class="list">
      <li class="first a b c">01</li>
      <li>02</li>
      <li class="mid">03</li>
      <li>04</li>
      <li>05</li>
      <li class="last">06</li>
    </div>
  </div>
</body>
<script>
  // getElementsByClassName() IE8 以下有问题
  // var first = document.getElementsByClassName("first")[0];
  // console.log(first);

  // document.querySelector IE7 以下有问题
  // var first = document.querySelector(".first");
  // console.log(first);

  // 需求:  模拟封装 getElementsByClassName(className)  => 从页面中所有的元素含有指定class名的元素

  // 如何获取页面的所有元素?
  // (1)   document.all
  // (2)   document.getElementsByTagName("*")

  var className = "first";
  var all = document.getElementsByTagName("*");
  console.log(all);

  var arr = [];
  for (var i = 0; i < all.length; i++) {
    var ele = all[i];  //遍历集合 => 每一个html元素
    var _class = ele.getAttribute("class");
    // console.log(_class);
    if (_class) { // 如果含有class名

      // 有问题 class名可能有多个 "first a b c"
      // if(_class === className){
      //     arr.push(ele);
      // }

      // 有问题 "first123123 a b c" 也包含 "first"
      // if(_class.indexOf(className)!=-1){
      //     arr.push(ele);
      // }

      // 有问题?  IE8以及以下 没有indexOf() 方法
      // var classList = _class.split(" ");
      // // console.log(classList);
      // if(classList.indexOf(className)!=-1){
      //     arr.push(ele);
      // }


      // 有问题?  IE8以及以下 没有indexOf() 方法
      var classList = _class.split(" ");
      // console.log(classList);
      if (myIndexOf(classList, className) != -1) {
        arr.push(ele);
      }


    }

  }
  console.log(arr);


  // var arr = [1,2,3,4];
  // var char = "1";

  // var flag = false;
  // for(var i=0;i<arr.length;i++){
  //     var item = arr[i];
  //     if(item === char){
  //         flag = true;
  //     }
  // }
  // console.log(flag);

  function myIndexOf(arr, char) {
    // var arr = [1,2,3,4];
    // var char = "1";

    var index = -1; //假设不存在 -1
    for (var i = 0; i < arr.length; i++) {
      var item = arr[i];
      if (item === char) {
        index = i;  //存在就记录下标
      }
    }
    return index;
  }





</script>

</html>